<template>
    <div> 
        <div class="clearfix" style="padding-left: 20px;">  
            <label class="filter-item" style="margin-right: 10px">
                <span>客户：</span>
                <Select filterable v-model="filters.customer_id" placeholder="请选择" style="width: 150px;">
                    <!-- value 赋值空会触发iview 下拉bug -->
                    <Option value="-1" key="all">全部客户</Option>
                    <Option v-for="(item,index) in allCustomers" :value="item.customer_id" :key="`all${index}`">{{item.customer_mark}}</Option>
                </Select>
            </label> 
            <label class="filter-item" style="margin-right: 10px">
                <span>域名：</span> 
                <MultiSelect
                    v-model="filters.domain_id"
                    :options="options"
                    :filters="mSelectfilters" 
                    search
                    searchPlaceholder="请输入搜索关键字"
                    :selectOptions="customerRelatedomains" 
                /> 
            </label> 
            <label class="filter-item">
                <span>日期：</span>
                <DatePicker type="daterange" @on-change="handleChangeDate" split-panels placeholder="Select date" style="width: 200px"></DatePicker> 
            </label>
            <label for="" class="filter-item">
                <Button type="primary" :disabled="queryDisabled" @click="handleQuery">{{queryDisabled ? '查询中...' : '查询'}}</Button>    
            </label>   
        </div> 
        <div class="chartBox">
          <p class="chartBoxTil">带宽图
              <span style="font-size: 15px;">(Mbps)</span>
          </p>
          <div class="chartContent">
            <div class="" style="width: 100%; position:relative"> 
                <div class="" v-show="switchBandwidth.length === 0 && !queryDisabled">
                  暂无数据
                </div>
                <div id="main" :style="{opacity: (switchBandwidth.length > 0 && !queryDisabled) ? 1 : 0, width:'100%',height:'450px'}"></div>
                <div v-if="queryDisabled" class="sk-box">     
                    <div class="sk-wave">
                      <div class="sk-rect sk-rect1"></div>
                      <div class="sk-rect sk-rect2"></div>
                      <div class="sk-rect sk-rect3"></div>
                      <div class="sk-rect sk-rect4"></div>
                      <div class="sk-rect sk-rect5"></div>
                    </div>
                    <p>加载中...</p>
                </div>   
            </div>  
          </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import echarts from "echarts" 
import MultiSelect from '@/components/MultiSelect'
export default {
  name: "SwitchChartView",
  computed: {
      ...mapGetters(['allCustomers', 'customerRelatedomains', 'switchBandwidth'])
  }, 
  components: {
      MultiSelect,
  },
  data(){
    return {
        /** MultiSelect options **/
        mSelectfilters: [{
            nameAll: '全选',
            nameNotAll: '全不选',
            func(elem) {
            return elem.domain;
            },
        }],
        options: {
            multi: true, 
        },
        /** MultiSelect options **/
        filters: {
            customer_id: '',
            domain_id: []
        },
        time: [],
        queryDisabled: false,
    }
  },
  watch:{
      ['filters.customer_id'](val){ 
            this.fetchCustomerRelateDomain() 
      }, 
  }, 
  methods: {
    handleQuery(){ 
        if(this.filters.domain_id.length === 0){
            this.$Message.warning("请选择查询域名")
            return 
        }
        if(this.time.length === 0){
            this.$Message.warning("请选择查询日期")
            return 
        }
        this.queryDisabled = true
        this.queryDomainSwitchData()
    }, 
    queryDomainSwitchData(){ 
        let 
            _this = this,
            time = _this.time,
            condition = {
                params: {
                    domain_id: this.filters.domain_id.map(item => {return item.id}).join(','),
                    start: `${`${time[0]}`} 00:00`,
                    end: `${time[1]} 23:59`,
                },
                cb(_data){ 
                    if(_data.ok){
                        _this.renderCharts()
                    }
                    _this.queryDisabled = false
                } 
            };
            _this.$store.dispatch('queryDomainSwitchData', condition);
    },
    fetchCustomerRelateDomain(){
        let customer_id = this.filters.customer_id;
        if (customer_id > 0 || customer_id === '-1') {
          let _this = this;
          let condition = {
            params: {
              customer_id: customer_id === '-1' ? '' : customer_id 
            },
            cb(_data){
              _this.filters.domain_id = []
            }
          };
          _this.$store.dispatch('fetchCustomerRelateDomain', condition);
        }
    },
    /**** 图表 ** */
    handleChangeDate(time){
        this.time = time 
    },
    renderCharts(){ 
        let myChart = echarts.init(document.getElementById('main')); 
        let {
            xAxis, series
        } = this.formatChartData([...this.switchBandwidth]);
        let option = {
            title: {
                text: '域名带宽数据',
                x:'center'
            },
            color: ['#9ac8e8'],
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: series,
                type: 'line',
                smooth: true
            }]
        };
        myChart.setOption(option);  
    },
    formatChartData(d){ 
        let 
            xAxis = [],
            series = [];
        /*
        d.sort((d1, d2) => { 
            if(new Date(d1[0].replace(/-/g,"/")).getTime() > new Date(d2[0].replace(/-/g,"/")).getTime()){
                return 1;
            }else{
                return -1;
            }
        }); 
        */

        d.forEach(item => {
            xAxis.push(moment(item[0]).format('YYYY-MM-DD HH:mm:ss'))
            series.push(item[1])
        }) 
        return {
            xAxis,
            series
        }
    }
  }
}
</script>

<style lang="scss">
  .chartBox{
    border: 1px solid #ddd;
    margin-top: 20px;
    .chartBoxTil{
      line-height: 50px;
      height: 50px;
      font-size: 18px;
      padding-left: 20px;
      background: #f7f7f7
    }
    .chartContent{
      height: 450px;
      font-size: 16px;
      text-align: center;
      line-height: 450px;
    }
  }
  .sk-box{
    position: absolute;
    left: 50%;
    top: 20%;
    margin-left: -26px;
    line-height: 20px;
  }
  .sk-wave {
    width: 50px;
    height: 40px;
    text-align: center;
    font-size: 10px; 
  }
  .sk-wave .sk-rect {
    background-color: #5e9afc;
    height: 100%;
    width: 6px;
    display: inline-block;
    -webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;
            animation: sk-waveStretchDelay 1.2s infinite ease-in-out; 
}
  .sk-wave .sk-rect1 {
    -webkit-animation-delay: -1.2s;
            animation-delay: -1.2s; 
}
  .sk-wave .sk-rect2 {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s; 
}
  .sk-wave .sk-rect3 {
    -webkit-animation-delay: -1s;
            animation-delay: -1s; 
}
  .sk-wave .sk-rect4 {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s; 
}
  .sk-wave .sk-rect5 {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s; 
}

@-webkit-keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }

@keyframes sk-waveStretchDelay {
  0%, 40%, 100% {
    -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4); }
  20% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1); } }
</style>
